<template>
	<view class="page">
		<view class="echarts">
			<view class="echarts-btn">
				<view @click="getLoginNum(index)" :class="{select:index===lineTabIdx}" v-for="(item,index) in lineTabs" :key="index"
				 class="btn">
					{{item}}
				</view>
			</view>
			<hzwq-echarts @handleClickItem="handleLineClickItem" :config="lineConfig" :option="lineOptions"></hzwq-echarts>
		</view>

		<view class="echarts">
			<hzwq-echarts @handleClickItem="handleBarClickItem" :config="barConfig" :option="barOptions"></hzwq-echarts>
		</view>
	</view>
</template>


<script>
	import HzwqEcharts from "@/components/hzwq-echarts/hzwq-echarts.vue"
	export default {
		components: {
			HzwqEcharts,
		},
		data() {
			return {
				lineConfig: {
					width: "100%",
					height: "250px",
					id: "lineEcharts"
				},
				lineOptions: {
					title: {
						text: '终端登录率'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								type: "dashed",
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 12,
							align: "center",
							rotate: 0,
							margin: 25
						},
						data: [],
						triggerEvent: true
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false,
						},
						triggerEvent: true
					},
					series: [{
						type: 'line',
						data: [],
						markPoint: {
							data: [{
								type: 'max',
								name: '高亮',
								value: "", // 为标注值
								xAxis: "", // 标注位置X轴 可以是x轴对应的值，也可以是xAxis数据的下标(下标从0开始)
								yAxis: "" // 标注位置Y轴 可以比值大点(标注在数据点上方)，也可以小点(标注在数据点下方)
							}, ],
						},
						markLine: {
							symbol: "none",
							label: {
								color: "#14c893",
								padding: [-26, 0, 0, -40],
								// position: "insideEndTop",
								// distance:[-20,20]
							},
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(20, 200, 147, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(20, 200, 147, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}]
				},
				lineTabs: ["近三月", "近半年", "近一年"],
				lineTabIdx: 1,

				barConfig: {
					width: "100%",
					height: "250px",
					id: "barEcharts"
				},
				barOptions: {
					title: {
						text: '三合一终端安装融e通占比'
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								type: "dashed",
							}
						},
						axisLabel: {
							interval: 0,
							fontSize: 12,
							align: "center",
							margin: 15
						},
						data: [],
					},
					yAxis: {
						name: '单位(%)',
						nameTextStyle: {
							color: "#999999",
							padding: [0, 0, 0, -30],

						},
						type: 'value',
						max: 100,
						min: 0,
						// axisTick:{
						// 	length:4
						// },
						axisLine: {
							lineStyle: {
								type: "dashed",
							}
						}
					},
					series: [{
						type: 'bar',
						barWidth: '20',
						itemStyle: {
							barBorderRadius: [3, 3, 0, 0]
						},
						data: [],
						markPoint: {
							data: [{
								// type: 'max',
								name: '高亮',
								value: "", // 为标注值
								xAxis: "", // 标注位置X轴 可以是x轴对应的值，也可以是xAxis数据的下标(下标从0开始)
								yAxis: "" // 标注位置Y轴 可以比值大点(标注在数据点上方)，也可以小点(标注在数据点下方)
							}]
						},
						markLine: {
							symbol: "none",
							label: {
								padding: [-26, 0, 0, -40],
								color: "#14c893",
								// position: "insideEndTop",
								// distance:[-20,20]
							},
							data: [{
								type: 'average',
								name: '平均值'
							}]
						},
					}]
				},

			};

		},
		onLoad() {
			this.getLoginNum(1)
			this.getCityNum()
		},
		methods: {
			handleLineClickItem(e) {
				let series = this.lineOptions.series.slice(0)
				series[0].markPoint.data[0] = {
					value: e.data,
					xAxis: e.dataIndex,
					yAxis: e.data,
				}
				this.$set(this.lineOptions, "series", series)
			},
			handleBarClickItem(e) {
				let series = this.barOptions.series.slice(0)
				series[0].markPoint.data[0] = {
					value: e.data.num,
					xAxis: e.dataIndex,
					yAxis: e.data.value,
				}
				this.$set(this.barOptions, "series", series)
			},
			getCityNum() {
				let list = [{
						city: "郑州",
						num: 68,
						tot: 100
					},
					{
						city: "许昌",
						num: 80,
						tot: 90
					},
					{
						city: "驻马店",
						num: 51,
						tot: 120
					},
					{
						city: "南阳",
						num: 27,
						tot: 130
					},
					{
						city: "开封",
						num: 20,
						tot: 100
					},
					{
						city: "信阳",
						num: 15,
						tot: 100
					},
				]
				let Xdata = list.map(i => i.city)
				let Ydata = list.map(i => {
					return {
						num: i.num,
						value: i.num / i.tot * 100
					}
				})
				this.barOptions.xAxis.data = Xdata
				this.barOptions.series[0].data = Ydata
				this.barOptions.series[0].markPoint.data[0] = {
					value: Ydata[1].num,
					xAxis: 1,
					yAxis: Ydata[1].value,
				}
			},
			getLoginNum(type = 1) {
				let list = [{
						time: "2020-06",
						num: 160
					},
					{
						time: "2020-07",
						num: 220
					},
					{
						time: "2020-08",
						num: 250
					},
					{
						time: "2020-09",
						num: 300
					},
					{
						time: "2020-10",
						num: 400
					},
					{
						time: "2020-11",
						num: 250
					},
					{
						time: "2020-12",
						num: 320
					},
					{
						time: "2021-01",
						num: 290
					},
					{
						time: "2021-02",
						num: 120
					},
					{
						time: "2021-03",
						num: 200
					},
					{
						time: "2021-04",
						num: 350
					},
					{
						time: "2021-05",
						num: 160
					},
					{
						time: "2021-06",
						num: 120
					},
				]
				let copyList = []
				let axisLabel = this.lineOptions.xAxis.axisLabel
				if (type === 0) {
					copyList = list.slice(list.length - 3)
					axisLabel.rotate = 0
				} else if (type === 1) {
					copyList = list.slice(list.length - 6)
					axisLabel.rotate = 0
				} else {
					copyList = list.slice(0)
					axisLabel.rotate = 45
				}
				this.lineTabIdx = type
				let Xdata = copyList.map(i => i.time)
				let Ydata = copyList.map(i => i.num)
				this.lineOptions.xAxis.data = Xdata
				this.lineOptions.xAxis.axisLabel = axisLabel
				this.lineOptions.series[0].data = Ydata
				this.lineOptions.series[0].markPoint.data[0] = {
					value: Ydata[Ydata.length - 2],
					xAxis: Ydata.length - 2,
					yAxis: Ydata[Ydata.length - 2],
				}
			},
			// 监听视图层通讯
			handleIPCRender(e) {
				console.log("监听到了视图层向逻辑层通讯:", e)
			}
		}
	}
</script>



<style lang="scss">
	page {
		background-color: #ededed;
	}

	.page {
		padding: 0 10px;
	}

	.echarts {
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding-top: 20px;
		position: relative;
		margin-top: 10px;

		.echarts-btn {
			display: flex;
			position: absolute;
			right: 10px;
			top: 15px;
			z-index: 9;

			.btn {
				background-color: #f4f4f4;
				color: #666666;
				font-size: 28rpx;
				width: 60px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				margin-left: 5px;
				border-radius: 15rpx;

				&.select {
					color: #FFFFFF;
					background-color: #14c893;
				}
			}
		}
	}
</style>
